<script setup lang="ts">
import { ref, computed } from 'vue';
import {getUserJobInfoService, removeCollectJobService, removePostJobService, removeRecruitJobService, viewJobDetailsService} from "@/api/user.js";
import { ElMessage } from 'element-plus'
import {useRouter} from "vue-router";

const CollectJobList = ref([
  {
    jobId: 'J001',
    companyId: 'C001',
    location: 'San Francisco, CA',
    hr: 'Alice Johnson',
    tags: ['Full-time', 'Remote'],
    name: 'Senior Software Engineer',
    salary: '$120k - $150k',
    companyName: 'Tech Innovators Inc.',
    description: 'We are seeking an experienced software engineer to join our growing team...'
  },
]);

const PostJobList = ref([
  {
    jobId: 'J001',
    companyId: 'C001',
    location: 'San Francisco, CA',
    hr: 'Alice Johnson',
    tags: ['Full-time', 'Remote'],
    name: 'Senior Software Engineer',
    salary: '$120k - $150k',
    companyName: 'Tech Innovators Inc.',
    description: 'We are seeking an experienced software engineer to join our growing team...'
  },
]);

const RecruitJobList = ref([
  {
    jobId: 'R001',
    companyId: 'C001',
    location: 'Seattle, WA',
    hr: 'Carolyn Lee',
    tags: ['Part-time', 'Hybrid'],
    name: 'Product Designer',
    salary: '$60k - $80k',
    companyName: 'Design Wizards LLC',
    description: 'We’re looking for a creative product designer to help shape the future of our product line...'
  },
]);

//获取路由
const router = useRouter()

//获取用户投递
async function getUserInfo(){
  let res = await getUserJobInfoService()
  CollectJobList.value = res.data.collectJobList;
  PostJobList.value = res.data.postJobList;
  RecruitJobList.value = res.data.recruitJobList;
  console.log(CollectJobList.value)
  console.log(CollectJobList.value.length, PostJobList.value.length, RecruitJobList.value.length)
}

getUserInfo();

//删除收藏的职位记录
async function removeCollectJob(jobId, companyId){
  let res = await removeCollectJobService(jobId, companyId)
  getUserInfo()
  ElMessage.success('删除成功')
}

//删除投递简历记录
async function removePostJob(jobId, companyId){
  let res = await removePostJobService(jobId, companyId)
  getUserInfo()
  ElMessage.success('删除成功')
}

//删除面试邀请记录
async function removeRecruitJob(jobId, companyId){
  let res = await removeRecruitJobService(jobId, companyId)
  getUserInfo()
  ElMessage.success('删除成功')
}

//查看职位详情
const viewJobDetails = async (jobId) => {
  router.push(`/JobDetails/${jobId}`)
};

</script>

<template>
  <!-- Start Candidates Dashboard Area -->

  <div class="col-lg-8">
    <div class="candidates-dashboard-content">
      <div class="candidates-dashboard">
        <h3>收藏职位</h3>

        <div class="col-lg-4">
          <div class="field-top">
            <!-- 展示收藏职位的数量 -->
            <div class="field-top-title">收藏岗位数量</div>
            <span>{{ CollectJobList.length===0 ? 0: CollectJobList.length }}</span>
          </div>
        </div>
      </div>

      <div class="recent-activities">
        <h3>收藏列表</h3>

        <ul class="activities">
          <!-- 遍历收藏的职位列表并显示 -->
          <li v-for="(job, index) in CollectJobList" :key="index" class="activity-item">
            <div class="item-content clickable" @click="viewJobDetails(job.jobId, job.companyId)">
              地点为{{ job.location }}的{{ job.companyName }}公司岗位：{{ job.name }}已收藏
            </div>
            <el-button
                type="text"
                size="small"
                @click.prevent="removeCollectJob(job.jobId, job.companyId)"
            >
              <i class="el-icon-delete"></i> 删除
            </el-button>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="col-lg-8">
    <div class="candidates-dashboard-content">
      <div class="candidates-dashboard">
        <h3>投递职位</h3>

        <div class="col-lg-4">
          <div class="field-top">
            <div class="field-top-title">投递的岗位数量</div>
            <span>{{ PostJobList.length===0 ? 0: PostJobList.length }}</span>
          </div>
        </div>
      </div>

      <div class="recent-activities">
        <h3>投递列表</h3>

        <ul class="activities">
          <!-- 遍历收藏的职位列表并显示 -->
          <li v-for="(job, index) in PostJobList" :key="index" class="activity-item">
            <div class="item-content clickable" @click="viewJobDetails(job.jobId, job.companyId)">
              地点为{{ job.location }}的{{ job.companyName }}公司岗位：{{ job.name }}     已投递
            </div>
            <el-button
                type="text"
                size="small"
                @click.prevent="removePostJob(job.jobId, job.companyId)"
            >
              <i class="el-icon-delete"></i> 删除
            </el-button>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="col-lg-8">
    <div class="candidates-dashboard-content">
      <div class="candidates-dashboard">
        <h3>面试邀请信息</h3>

        <div class="col-lg-4">
          <div class="field-top">
            <!-- 使用计算属性显示RecruitJobList的长度 -->
            <div class="field-top-title">面试邀请岗位数量</div>
            <span>{{ RecruitJobList.length===0 ? 0: RecruitJobList.length }}</span>
          </div>
        </div>
      </div>

      <div class="recent-activities">
        <h3>面试邀请列表</h3>

        <ul class="activities">
          <!-- 遍历RecruitJobList并显示 -->
          <li v-for="(job, index) in RecruitJobList" :key="index" class="activity-item">
            <div class="item-content clickable" @click="viewJobDetails(job.jobId, job.companyId)">
              地点为{{ job.location }}的{{ job.companyName }}公司岗位：{{ job.name }}邀请您参加面试
            </div>
            <!-- 注意：如果不需要删除按钮，可以移除此部分 -->
            <el-button
                type="text"
                size="small"
                @click.prevent="removeRecruitJob(job.jobId, job.companyId)"
            >
              <i class="el-icon-delete"></i> 删除
            </el-button>
          </li>
        </ul>
      </div>
    </div>
  </div>


  <!-- End Candidates Dashboard Area -->
</template>

<style scoped>
@import "@/assets/css/bootstrap.min.css";
@import "@/assets/css/owl.theme.default.min.css";
@import "@/assets/css/owl.carousel.min.css";
@import "@/assets/css/animate.min.css";
@import "@/assets/css/boxicons.min.css";
@import "@/assets/css/magnific-popup.min.css";
@import "@/assets/css/flaticon.css";
@import "@/assets/css/meanmenu.min.css";
@import "@/assets/css/nice-select.min.css";
@import "@/assets/css/odometer.min.css";
@import "@/assets/css/date-picker.min.css";
@import "@/assets/css/muli-fonts.css";
@import "@/assets/css/style2.css";
@import "@/assets/css/responsive2.css";

.activity-item {
  display: flex;
  justify-content: space-between;
}
.item-content {
  /* 可以根据需要调整文本样式 */
}


.candidates-dashboard {
  width: 275%;
}

.field-top {
  display: flex;
  justify-content: space-between; /* 两端对齐，使内容分散在容器两侧 */
  align-items: center; /* 垂直居中对齐 */

  width: 100%;
  border: 1px solid #007bff; /* 蓝色边框 */
  border-radius: 4px; /* 可选，为元素添加圆角以提升美观度 */
  padding: 16px; /* 可选，增加内边距以便内容更加舒适 */
  margin-bottom: 16px; /* 可选，为下方元素留出空间 */
}

/* 美化field-top的标题 */
.field-top-title {
  font-size: 16px;
  font-weight: bold;
  color: #333; /* 或使用变量以保持主题一致性 */
  margin-bottom: 8px; /* 在标题与内容之间添加一些间距 */
}

/* 调整数字显示样式，使其更加突出 */
.field-top span {
  font-size: 24px;
  font-weight: bold;
  color: #007bff; /* 与边框颜色相呼应 */
  display: block;
  margin-top: 4px;
}

.col-lg-8 {

  margin-bottom: 20px;
}

.candidates-dashboard-content {
  width: 155%;
}

</style>